<template>
    <div>
        <van-swipe class="my-swipe" vertical indicator-color="transparent">
            <van-swipe-item>
                <div class="video-item d-flex flex-column jc-between">
                    <div class="v-d-top" @click="back">
                        <svg class="icon mt-3 ml-3" aria-hidden="true">
                            <use xlink:href="#icon-zuojiantou-copy"></use>
                        </svg>
                    </div>
                    <div class="v-d-content">
                        <video
                            autoplay
                            :src="model.url"
                            class="video"
                            ref="video"
                            @click="pauseVideo"
                        ></video>
                    </div>
                    <div class="v-d-bottom">
                        <div class="message text-white mb-3">
                            <div class="message-top d-flex jc-between mb-4">
                                <div class="author ml-4">
                                    <div class="mb-3">@{{ artistName }}</div>
                                    <div>{{ name1 }}</div>
                                </div>
                                <div class="commend d-flex flex-column mr-2">
                                    <div
                                        class="
                                            d-flex
                                            flex-column
                                            ai-center
                                            mb-3
                                        "
                                    >
                                        <svg class="icon dz" aria-hidden="true">
                                            <use
                                                xlink:href="#icon-dianzan-copy"
                                            ></use>
                                        </svg>
                                        <div>123</div>
                                    </div>
                                    <div>
                                        <svg class="icon dz" aria-hidden="true">
                                            <use
                                                xlink:href="#icon-xinxi-copy"
                                            ></use>
                                        </svg>
                                        <div>123</div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-range">
                                <van-slider
                                    v-model="currentTime"
                                    :max="duration"
                                    :min="0"
                                    class="custom-button"
                                    button-size="0"
                                    active-color="#ff0000"
                                    inactive-color="#666666"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </van-swipe-item>
            <!-- <van-swipe-item>
                <div class="video-item d-flex flex-column jc-between">
                    <div class="v-d-top" @click="back">
                        <svg class="icon mt-3 ml-3" aria-hidden="true">
                            <use xlink:href="#icon-zuojiantou-copy"></use>
                        </svg>
                    </div>
                    <div class="v-d-content">
                        <video
                            :src="model.url"
                            class="video"
                            ref="video"
                            @click="pauseVideo"
                        ></video>
                    </div>
                    <div class="v-d-bottom">
                        <div class="message text-white mb-3">
                            <div class="message-top d-flex jc-between mb-4">
                                <div class="author ml-4">
                                    <div class="mb-3">@{{ artistName }}</div>
                                    <div>{{ name1 }}</div>
                                </div>
                                <div class="commend d-flex flex-column mr-2">
                                    <div
                                        class="
                                            d-flex
                                            flex-column
                                            ai-center
                                            mb-3
                                        "
                                    >
                                        <svg class="icon dz" aria-hidden="true">
                                            <use
                                                xlink:href="#icon-dianzan-copy"
                                            ></use>
                                        </svg>
                                        <div>123</div>
                                    </div>
                                    <div>
                                        <svg class="icon dz" aria-hidden="true">
                                            <use
                                                xlink:href="#icon-xinxi-copy"
                                            ></use>
                                        </svg>
                                        <div>123</div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-range">
                                <van-slider
                                    v-model="currentTime"
                                    :max="duration"
                                    :min="0"
                                    class="custom-button"
                                    button-size="0"
                                    active-color="#ff0000"
                                    inactive-color="#666666"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </van-swipe-item> -->
        </van-swipe>
    </div>
</template>

<script>
import service from "@/request/index";
import { mapMutations } from "vuex";
export default {
    name: "PlayVideo",
    data() {
        return {
            model: {},
            currentTime: 0,
            duration: 0,
            isplay: true,
        };
    },
    computed: {
        id() {
            return this.$route.params.id;
        },
        name1() {
            return this.$route.query.name1;
        },
        artistName() {
            return this.$route.query.artistName;
        },
        video() {
            return this.$refs.video;
        },
    },
    methods: {
        async fetch() {
            const res = await service.get(`/mv/url?id=${this.id}&r=1080`);
            console.log(res);
            this.model = res.data.data;
            this.updateCurrentTime();
        },
        back() {
            this.$router.go(-1);
        },
        updateCurrentTime() {
            this.video.addEventListener("timeupdate", () => {
                console.log(222, this.video.currentTime);
                this.currentTime = this.video.currentTime;
            });
        },
        updateDuration() {
            setTimeout(() => {
                const video = this.$refs.video;
                // console.log(video.duration);
                this.duration = video.duration;
            }, 500);
        },
        pauseVideo() {
            if (this.isplay) {
                this.$refs.video.pause();
                this.isplay = false;
            } else {
                this.$refs.video.play();
                this.isplay = true;
            }
        },
        totime() {},
        ...mapMutations(["UPDATEFOOTERSHOW"]),
    },
    updated() {},
    mounted() {
        this.fetch();
        this.UPDATEFOOTERSHOW(false);
        this.updateDuration();
    },
};
</script>

<style lang="less" scoped>
.video-item {
    background-color: #000;
    height: 100vh;
    .video {
        width: 100%;
        height: auto;
        background: #000;
    }
    .v-d-bottom {
        .message {
            .message-top {
                .author {
                    align-self: flex-end;
                }
                .commend {
                    .xx,
                    .dz {
                        height: 0.6rem;
                        width: 0.6rem;
                    }
                }
            }
            .range {
                width: 100%;
            }
        }
        .custom-button {
            width: 100%;
            color: #fff;
            font-size: 10px;
            line-height: 18px;
            text-align: center;
            background-color: #000;
            border-radius: 100px;
        }
    }
}
</style>